<template>
  <div id="systemRecycle" v-loading="Recycleloading">
    <div v-if="!isicon" class="remove">
    </div>
    <div v-if="!isicon" class="syCount">
      <el-col v-for="item in recycleList" :key="item.accountId" :value="item.accountId">
        <div class="grid-content bg-purple-dark" style="height: 35%;">
          <!-- <el-checkbox  v-model="item.checked" @change="choice(item.accountId,item.checked)"></el-checkbox> -->
          <span class="subject_top_span">{{(item.abbreviationName?item.abbreviationName:'')}}</span>
          <ul class="subject_top_List">
            <li @click="restoreAccount(item,'restore')" v-if="jurisdictionControl.J_ReductionAccountSet">
              <i class="iconfont iconsize">&#xe608;</i>
              <span>还原账套</span>
            </li>
            <li @click="restoreAccount(item,'del')" v-if="jurisdictionControl.J_DelAccountSet">
              <i class="iconfont iconsize">&#xe612;</i>
              <span>删除账套</span>
            </li>
          </ul>
        </div>
        <div class="grid-content bg-purple-dark time">
          <ul class="subject_bottom_List">
            <li class="item">
              <span>账套编码:</span>
              <p>{{item.subNumber}}</p>
            </li>
            <li class="item_below">
              <span>纳税性质:</span>
              <p>{{item.taxType==1?'小规模纳税人':item.taxType==2?'一般纳税人':''}}</p>
            </li>
          </ul>
          <ul class="subject_bottom_List">
            <li class="item">
              <span>账套名称:</span>
              <p>{{item.subName}}</p>
            </li>
          </ul>
          <ul class="subject_bottom_List">
            <li class="item">
              <span>税号:</span>
              <p>{{item.taxNumber}}</p>
            </li>
          </ul>
        </div>
      </el-col>
    </div>
    <div v-if="!isicon" class="paging">
      <el-pagination :small="true" background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes=[3,6,9] :page-size="3" :pager-count=5 layout="total, sizes, prev, pager, next, jumper" :total=TotalQty class="pagingChild"></el-pagination>
    </div>
    <!-- 还原弹框 -->
    <delPopup v-if="Reduction" @delPostConfirm="Restorebounced" :delPopup="delPopup" />
    <div v-if="isicon" class="iconCount">
      <img src="@/assets/images/available.png" />
    </div>
  </div>
</template>
<script>
import { mapState } from 'vuex';
import delPopup from '@/components/delPopup';
export default {
  name: 'systemRecycle',
  components: {
    delPopup
  },
  data() {
    return {
      jurisdictionControl: {
        J_DelAccountSet: false, // 删除账套
        J_ReductionAccountSet: false // 还原账套
      },
      currentPage: 1, // 默认页码
      PageSetList: 3, // 默认列表条数
      recycleList: [], // 账套列表
      TotalQty: 0, // 账套总条数
      TotalPage: '', // 总页
      disableS: [],
      delPopup: {
        title: '',
        isShow: false,
        Type: '',
        icon: true
      },
      delDepParams: {},
      Reduction: false,
      Recycleloading: false,
      isicon: false
    };
  },
  computed: {
    ...mapState({
      userInfo: state => state.common.userInfo,
      moduleId: state => state.common.moduleId
    })
  },
  methods: {
    handleSizeChange(val) {// 分页
      this.PageSetList = val;
      this.GetbooksList();
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.GetbooksList();
    },

    GetbooksList() {// 获取回收站账套列表
      this.Recycleloading = true;
      let params = {
        pageIndex: this.currentPage,
        pageSize: this.PageSetList,
      };
      this.$api.companyInfo.GetSubCompanyGcPageList(params).then(res => {
        let result = res.data;
        if (result.status === 200 && result.data) {
          this.recycleList = result.data.items;
          this.TotalQty = result.data.totalCount;
          if (!this.recycleList || this.recycleList.length === 0) {
            this.isicon = true;
          } else {
            this.isicon = false;
            // this.recycleList.map(item => {
            //   this.$set(item, 'checked', false); // 这里，给对象添加属性，用$set方法。
            //   return item;
            // });
          }
          this.disableS = [];
        } else if (result.status === 204) {
          this.recycleList = [];
          this.isicon = true;
        }
        this.Recycleloading = false;
      });
    },
    removeArray(arr, val) { // 删除数组指定元素
      for (var i = 0; i < arr.length; i++) {
        if (arr[i] === val) {
          arr.splice(i, 1);
          break;
        }
      }
    },
    choice(result, ischeck) { // 选框
      if (ischeck) {
        this.disableS.push(result);
      }
      if (!ischeck) {
        this.removeArray(this.disableS, result);
      }
    },
    Restorebounced() { // 还原账套
      let params = {
        subid: this.delDepParams.subid,
      };
      if(this.delPopup.Type == 'del') {
        params.companyId = this.delDepParams.companyid;
        this.$api.companyInfo.RemoveBranchCompany(params).then(res => {
          if (res.data.status === 200 && res.data.message.length < 6) {
            this.delPopup.isShow = false;
            this.GetbooksList();
            this.$message({
              message: '删除成功',
              type: 'success'
            });
          } 
        });
      }else{
        this.$api.companyInfo.SubCompanyRestore(params).then(res => {
          if (res.data.status === 200 && res.data.message.length < 6) {
            this.delPopup.isShow = false;
            this.GetbooksList();
            this.$message({
              message: '还原成功',
              type: 'success'
            });
          } 
        });

      }
      
    },
    restoreAccount(item, Type) { // 还原账套的弹框和参数
      this.Reduction = true;
      this.delDepParams = item;
      this.delPopup = {
        title: Type == 'del' ? '删除账套' : '还原账套',
        isShow: true,
        describe: `确定${Type == 'del' ? '删除' : '还原'}该账套吗？`,
        icon: true,
        Type,
      };
    },
    getJurisdiction() {
      if (this.userInfo.isadmin) {
        this.jurisdictionControl = {
          J_DelAccountSet: true, // 删除账套
          J_ReductionAccountSet: true // 还原账套
        };
        return;
      }
      let params = {
        id: this.moduleId
      };
      this.$api.publicApi.GetActionInfo(params).then(res => {
        let resData = res.data.data;
        resData.map(item => {
          if (item.name === '删除账套') {
            this.jurisdictionControl.J_DelAccountSet = true;
          }
          if (item.name === '还原账套') {
            this.jurisdictionControl.J_ReductionAccountSet = true;
          }
        });
      });
    }
  },
  mounted() {
    this.getJurisdiction(); // 获取权限
  },
  activated() {
    this.GetbooksList();
  }
};
</script>
<style lang="less">
#systemRecycle {
  padding: 0;
  // .delPopupContent {
  //   text-align: center;
  //   padding: 30px 0;
  //   >.iconfont {
  //     font-size: 100px;
  //     color: #DEE3E9;
  //     line-height: 1;
  //   }
  //   >p{
  //     text-align: center;
  //     font-size: 17px;
  //     margin-top: 10px;
  //   }
  // }
  .el-col-24 {
    width: 88%;
    height: 54px;
    text-align: center;
    box-shadow: 0px 0px 10px #d4dcf0;
    border: none;
    margin-top: 1.2%;
    margin-bottom: 1%;
    background-color: #f7f8fc;
    position: relative;
    left: 7%;
    .span_blo {
      height: 100%;
      span {
        display: inline-block;
        color: #39a4ed;
        margin-right: 10px;
      }
    }
  }
  .remove {
    //  padding: 1.5% 0 1% 7%;
    height: 20px;
    box-sizing: border-box;
    overflow: hidden;
    .iconsize {
      margin-right: 3px;
    }
  }
  .syCount {
    height: calc(100% - 65px);
    overflow-y: auto;
    .el-col-24 {
      width: 88%;
      height: 150px;
      box-shadow: 0px 0px 10px #d4dcf0;
      .subject_top_span {
        float: left;
        line-height: 50px;
        margin-left: 3%;
        font-size: 15px;
        color: #333;
        cursor: pointer;
        &:hover {
          color: #39a4ed;
        }
      }
      .el-checkbox {
        float: left;
        margin-top: 15px;
        margin-left: 18px;
      }
      .subject_top_List {
        width: 60%;
        height: 100%;
        float: right;
        li {
          float: right;
          color: #999;
          font-size: 13px;
          line-height: 50px;
          margin-right: 7%;
          cursor: pointer;
          .iconsize {
            font-size: 15px;
          }
          &:hover {
            color: #39a4ed;
          }
        }
      }
      .time {
        height: 65%;
        background-color: #ffffff;
        .subject_bottom_List {
          float: left;
          width: 28%;
          margin-left: 43px;
          li {
            text-align: left;
            span {
              display: inline-block;
              color: #999;
              font-size: 13px;
            }
            p {
              display: inline-block;
              margin-left: 5px;
              font-size: 13px;
              color: #515255;
            }
          }
          .item {
            margin-top: 20px;
          }
          .item_below {
            margin-top: 8px;
          }
        }
      }
    }
  }
  .paging {
    width: 100%;
    height: 40px;
    background-color: #fff;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    .pagingChild {
      float: right;
      .el-pagination__total {
        line-height: 28px;
      }
    }
  }
  .iconCount {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    img {
      width: 20%;
    }
  }
}
</style>
